<template>
    <div class="v-data">
        <div class="v-data-info">
            <div class="condition">
                <span class="r5">位置</span>
                <el-input class="r5" v-model="position" style="width: 200px;" readonly></el-input>
            </div>
            <div id="devicePos" style="width: 100%;height: 500px;"></div>
        </div>
    </div>
</template>

<script>
    import amap from "@/components/amap";

    export default {
        data() {
            return {
                amap: null,
                position: '',
                marker: null,
            }
        }
        , mounted() {
            this.init();
        }
        , methods: {
            init() {
                amap.init().then(AMap => {
                    let _this = this, map;
                    map = new AMap.Map('devicePos', {
                        zoom: 11
                    });
                    // 点击
                    map.on('click', function (ev) {
                        if (_this.marker) {
                            map.remove(_this.marker);
                        }
                        _this.marker = new AMap.Marker({
                            position: ev.lnglat,
                        });
                        map.add(_this.marker);
                        _this.position = ev.lnglat.lng + ',' + ev.lnglat.lat;
                    });
                });
            }
        }
    }
</script>

<style scoped>

</style>
